<template>
	<div class="list">
    <myHeader  :title="keyWords">
    <div class="left" @click="goback()" slot="left">
        <
    </div>
    <div class="right" slot="right">

    </div>
  </myHeader>
	 <div class="search">
	 	<select name="">
	 		<option value="5000米">5000米</option>
	 	</select>
	 	<select name="">
	 		<option value="5000米">全部分类</option>
	 	</select>
	 	<select name="sorts" v-model="selected" @change="changeValue()">
	 		<!--<option value="default">综合排序</option>
	 		<option value="price">价格排序</option>
	 		<option value="ratings">评分排序</option>-->
	 		<option v-for="option in options" :value="option.value">{{option.text}}</option>
	 	</select>
	 	<select name="">
	 		<option value="5000米">更多筛选</option>
	 	</select>
	 </div>

	 	<ul class="businesslist">
		 	<li class="listitem" v-for="data in itemListArr" @click="gotoDetail(data)" >
		 		<div class="itemleft">
		 			<h3 class="itemname">{{data.name}}</h3>
		 			<ul>
		 				<li class="star">
							<star :price="data.biz_ext.rating"></star>

		 				</li>
		 				<li class="ratings">673条评论</li>
		 				<li class="per" v-if="data.biz_ext.cost.length">人均<span>${{data.biz_ext.cost}}</span>元</li>
		 			</ul>
		 			<ul class="address">
		 				<li>{{data.type}}</li>
		 				<li>{{data.address}}</li>
		 				<li v-if="data.distance[0]">{{data.distance}}米</li>
		 			</ul>
		 			<ul class="tag">
		 				<li v-for = "datas in data.type.split(';')">{{datas}}</li>
		 			</ul>
		 		</div>
        <!-- //{{data.photos}} -->
		 		<img v-lazy="getUrl(data.photos)"/>
		 	</li>
	 		</ul>

  </div>
</template>

<script>
import star from "@/components/star"
import myHeader from "@/components/headerTop"
import {getSearch} from "@/API"
export default {
  name: 'list',
  data () {
    return {
      defaultItemListArr:[],
      itemListArr:[],
      keyWords:"美食",
      page:1,
      selected:"defaults",
       options: [{
            text: '综合排序',
            value: 'defaults'
        }, {
            text: '评分排序',
            value: 'ratings'
        }, {
            text: '价格排序',
            value: 'prices'
        }],

    }
  },

	created(){
			  this.$store.commit("changeIshow",{data:true})
            this.keyWords = this.$route.query.id;
            var _this=this;

            let lng=localStorage.getItem("lng")||"116.30894"
            let lat=localStorage.getItem("lat")||"40.03346"
            console.log(lng)
            getSearch(lng,lat,this.keyWords).then(res=>{
              console.log(res)
							  this.$store.commit("changeIshow",{data:false})
              if(res.infocode=="10000"){
                this.itemListArr = res.pois;

              }

            })

	},
	methods:{
		gotoDetail(item){
			console.log(item)
			this.$router.push({path:"/detail",query:{id:item.id,distance:item.distance}})
		},
    getUrl(arr){
      if(arr.length>0){
        return arr[0].url
      }else{
        return "http://www.hxbus.net/wiki/images/4/4e/%E6%9A%82%E6%97%A0%E5%9B%BE%E5%83%8F.jpg"
      }
    }
	},
	components:{
myHeader,star
	}

}
</script>


<style scoped>
	.list{
		padding-top: 2.444444rem;
		height: 100%;
	}
	h3{
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.header img{
		width: 1.666666rem;
		height: 0.629629rem;
	}
	.header .title,.header .back{
		font-size: 0.462962rem;
		color: #262626;
		font-weight: bold;
	}
	.header .back{
		margin-left: 0.185185rem;
		font-size: 0.555555rem;
	}
	/*.businesslist{
		margin-bottom: 0px;
	}*/
	.search{
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: space-around;
		height: 1.111111rem;
		background: white;
		color: #6e6e6e;
		font-size: 0.37037rem;
		border-bottom: 1px solid #e8e8e8;
		width: 100%;
		position: fixed;
		left: 0;
		top: 1.333333rem;
		background: #FFFFFF;
		z-index:999;

	}
	.scroll-view{
		box-sizing: border-box;
		  padding-top: 50px;
		  height: 100%;
		  background: #f6f6f6;
	}
	.search select{
		color: #6e6e6e;
		border: none;
		background: white;
	}
	.listitem{
		display: flex;
		/*height: 3.194444rem;*/
		padding: 0.592592rem 0.444444rem 0.324074rem 0.444444rem;
		border-bottom: 1px solid #e8e8e8;

	}
	.listitem .itemleft{
		flex-grow: 1;
    float: left;
		/*border: 1px solid red;*/
		height: 2.268518rem;
	}
	.itemleft .star{
		width: 1.851851rem;
	}
	.itemleft ul{
		display: flex;
		align-items: flex-end;
		height: 0.611111rem;
		color: #747474;
		font-size: 0.351851rem;
		/*border: 1px solid red;*/
	}
	.itemleft .address li:first-child{
		width: 1.851851rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.itemleft .address li:nth-child(2){
		width: 1.111111rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.itemleft ul li{
		margin-right: 0.296296rem;
	}
	.itemleft ul li span{
		color: #ff5e63;
		font-weight: bold;
	}
	.listitem img{
		width: 1.962962rem;
		height: 1.962962rem;
	}

 	.tag{
		display: flex;
		flex-direction: row;
	}
	.itemleft .tag li{
		border: 1px solid #6b6b6b;
		height: 0.4rem;
		border-radius:0.074074rem;
		padding: 0.046296rem 0.074074rem;
		font-size: 0.277777rem !important;
		overflow: hidden;
		/*align-self:flex-start;*/

	}
	.itemname{
		font-size: 0.462962rem;
		color: #1f1f1f;
		height: 0.462962rem;
		font-weight: bolder;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width: 86%;
	}
</style>
